<template>
	<view class="pages header-bg">
		<!-- 标题栏  start-->
		<!-- <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed header-bg"
				:style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content" :style="[{top:StatusBar+'px'}]">
					<view class="">我的金币</view>
				</view>
			</view>
		</view> -->
		<!-- 标题栏 end -->
		<!-- <view class="margin-right" @tap="handleJump" data-url="/pages/wallet/account-bind/index">
			绑定账号
		</view> -->
		<view class="bg-white margin-lr-sm padding-lg radius-8" id="info_box" style="margin-top: 128rpx;">
			<view class="flex align-center justify-between padding-bottom-lg">
				<view class="flex-sub solid-right flex flex-direction align-center">
					<!-- formatNumber -->
					<view class="text-bold fu-fs48 text-center text-333" style="color: #FA2033;">{{money}}</view>
					<view class="fu-fs28 text-666 margin-bottom-xs">喵币余额</view>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm padding-lr-sm margin-top flex align-center justify-between">
			<view class="flex align-center text-bold text-333 fu-fs32 ">近30天记录</view>
			<view class="text-999 text-sm" @tap="handleJump" data-url="/pages/wallet/consumer-detail/index">
				查看全部
				<text class="lg text-999 cuIcon-right"></text>
			</view>
		</view>
		<view class="detaiLiat">
			<scroll-view scroll-y :style="{ height: 'calc(100vh - 10rpx  - ' + heightTop + 'px)' }"
				@scrolltolower='loadMore'>
				<view class="list">
					<view class="list-wrap">
						<view class="ongg" v-for="(item, index) in list" :key="index">
							<view class="buy-left">
								<view class="share-right" style="overflow: hidden;">
									<view class="desc text-cut">{{ item.remark }}</view>
									<view class="riqiblls">{{ item.create_time }}</view>
								</view>
							</view>
							<view class="price-right">
								<text v-if="item.after_money - item.before_money > 0"
									class="add">+{{ item.change_money }}</text>
								<text v-else class="jian">{{ item.change_money }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 空布局 -->
				<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
				<uni-load-more v-if="list.length > 5"  :status="status"></uni-load-more>
			</scroll-view>
		</view>
		<!-- 弹窗  -->
		<fu-popup v-model="isShow" mode="center" width="540rpx" height="600rpx">
			<view class="pop-content padding">
				<view class="text-333 text-bold text-lg text-center">待结算金币规则</view>
				<jyf-parser :html="freeze_money_rule"></jyf-parser>
			</view>
			<view class="padding-top flex align-center justify-center" @tap="closePop">
				<view class="round close-btn flex align-center justify-center"><text class="cuIcon-close"
						style="color: #838383;"></text></view>
			</view>
		</fu-popup>
		<!-- 小程序提现提醒弹窗 -->
		<fu-popup v-model="withdrawShow" mode="center" width="540rpx" height="480rpx">
			<view class="pop-content padding">
				<view class="text-333  text-lg text-center" style="margin-top: 24rpx;">
					<view>尊敬的小主,提现功能仅在app中可实现哦～！</view>
					<view>请在应用市场下载 “美食商城”～！！</view>
					<view>一定是美食商城哦～！</view>
					<view>每周四点击提现后固定到账</view>
				</view>
				<view class="flex align-center justify-center withdrawBtn" @tap="withdrawShow = false">
					<view class="">我知道了</view>
				</view>
			</view>
			
		</fu-popup>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				money: '', //喵币余额
				list: [],
				isShow: false, //规则弹框
				freeze_money_rule: [] ,// 规则说明
				isInit:false,
				heightTop: 0,
				page: 1,
				status: 'more',
				withdrawShow:false
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
		},
		onUnload() {
			uni.$off('changeMoney', function(data) {});
		},
		onLoad(options) {
			let _this = this;
			//   _this.getMoney();

			uni.$on('changeMoney', function(data) {
				_this.money = '';
				_this.page = 1
				_this.status = 'more'
				_this.getMoney();
				_this.getMoneyList();
			});
		},
		onShow() {
			this.getMoney();
			this.page = 1
			this.status = 'more'
			this.getMoneyList();
		},
		methods: {
			getHeight() {
				const that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#info_box')
					.boundingClientRect(data => {
						that.heightTop = data.height;
					})
					.exec();
			},
			back() {
				uni.navigateBack();
			},
			showRules() {
				this.isShow = true;
			},
			/**
			 * @description 关闭规则说明
			 */
			closePop() {
				this.isShow = false;
			},

			// 金额明细
			getMoneyList() {
				if (this.status != "more") return;
				this.status = "loading";
				let data = {
				  page: this.page,
				  size: 10,
				  change_type: 0,
				};
				this.$api
					.post(global.apiUrls.getMoneyDetail, data)
					.then(res => {
						console.log('消费明细', res);
						this.isShowLoading = false
						if (res.data.code == 1) {
							var totalSize = res.data.data.total;
							var curPageData = res.data.data.data;
							if (this.page == 1) this.list = [];
							this.list = this.list.concat(curPageData);
							if (this.list.length < totalSize) {
							  this.status = 'more';
							  this.page++;
							} else {
							  this.status = 'noMore';
							}
						}
						this.isInit = true;
						uni.stopPullDownRefresh();
					})
					.catch(err => {
						console.log(err);
						this.isShowLoading = false
						uni.stopPullDownRefresh();
					});
			},

			// 结算详情
			toDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/wallet/settlement-detail/index',
					params: {
						items: JSON.stringify(item)
					}
				});
			},
			// 跳转提现
			toWithdrawDeposit(item) {
				// this.$message.info('尊敬的小主  提现功能仅在app中可实现哦～！请在应用市场下载 “美食商城”～！！一定是美食商城哦～！')
				// #ifdef MP-WEIXIN || H5
					this.withdrawShow = true
				// #endif
				// #ifdef APP-PLUS
				this.$urouter.navigateTo({
					url: '/pages/wallet/withdraw/index'
				});
				// #endif
				
			},
			getMoney() {
				let _this = this;
				_this.$api
					.get(global.apiUrls.getMyMoney, {})
					.then(res => {
						if (res.data.code == 1) {
							_this.money = res.data.data.mew_money;
							
							_this.getHeight();
						}
					})
					.catch(err => {
						console.log(err, 'get_my_money');
					});
			},
			loadMore() {
				this.getMoneyList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pages {
		background: #F6F7F9;
		overflow: hidden;

		&.header-bg {
			background-image: url($IMG_BASE_URL + 'mewBg.png');
			background-repeat: no-repeat;
			background-size: 100%;
		}
    .header-bg {
    	// background-image: url($IMG_BASE_URL + 'wallet-bg.png');
    	// background-repeat: no-repeat;
    	// background-size: 100%;
		background-color: #fff;
    }
		.detail-item {
			.desc {
				color: $codeColor;
			}
		}
	}
	.withdrawBtn{
		width: 100%;
		height: 120rpx;
		border-top: 1rpx solid #eee;
		color: #ff6f27;
		font-size: 28rpx;
		font-weight: 600;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.detaiLiat {
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
	
		margin-top: 32rpx;
		.list {
			border-radius: 24rpx;
			width: 100%;
			background-color: #fff;
			
	
			.list-wrap {
				// width: 702rpx;
				margin: 0 32rpx;
			}
	
			.ongg {
				height: 132rpx;
	
				margin: 0 auto;
				// padding:0 32rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				overflow: hidden;
	
				.buy-left {
					flex: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					overflow: hidden;
	
					.share-right {
						// padding-top: 10rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 53rpx;
						flex: 1;
	
						.desc {
							line-height: 42rpx;
							font-size: 28rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #333333;
						}
	
						.riqiblls {
							line-height: 32rpx;
							margin-top: 8rpx;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 400;
							color: #bfbfbf;
						}
					}
				}
	
				.price-right {
					padding-right: 10rpx;
					font-size: 32rpx;
					font-family: 'Oswald';
					font-weight: 400;
	
					opacity: 1;
	
					.add {
						color: #FB2A25;
					}
	
					.jian {
						color: #333333;
					}
				}
			}
		}
	}
	
	
	// 规则弹窗 start
	.pop-content {
		width: 540rpx;
		height: 472rpx;
		border-radius: 24rpx;
		background: #ffffff;
	}
	
	.close-btn {
		width: 54rpx;
		height: 54rpx;
		background-color: rgba(255, 255, 255, 0.6);
	}
	
	// 规则弹窗 end
</style>
